<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        :colNumOfRow="4"
        :formColumns="formList"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        :handleClearForm="clearCategorySelect"
        @getFormData="getFormData"
      >
        <SingleSelectCategory
          slot="category"
          ref="categorySingle"
          @onSelected="getCategoryCode"
        />
      </BasicForm>
    </el-card>
    <el-card class="table-card">
      <BasicTable
        showPagination
        showActionCol
        showSelectCol
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :tableHeight="480"
        :actionRender="renderTableBtnAction"
        :actionColWidth="100"
        :selection-change="selectionChange"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="total"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      >
        <div slot="content_context">
          <el-button
            v-for="(item, index) in renderBtns()"
            size="mini"
            type="primary"
            :key="index"
            :loading="item.loading"
            :disabled="item.disabled"
            @click="item.method"
          >{{ item.btnTxet }}</el-button>
        </div>
      </BasicTable>
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm'
import BasicTable from '@/components/skusTable'
import SingleSelectCategory from '@/components/Category/SingleSelect';
import skusPage from '@/mixins/commodity/skusPage'
import { FORM_ITEM, TABLE_COLUMNS } from './constants'
import { createExcelByExport } from '@/utils/bizUtils'
import { getTableAction } from '@/utils/getBtnsRender'
import {
  queryFactoryStandardListService,
  exportFactoryStandardService,
} from '@/api/sourcing/factoryStandard'
const CONFIG_TYPE = 2; // 配置类型
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    BasicTable,
    SingleSelectCategory
  },
  data () {
    return {
      formList: FORM_ITEM,
      formData: {
        categoryCode: '',
      },
      pageSizes: [10, 100, 1000],
    }
  },
  computed: {
    notSelectData () {
      return this.tableInfo.selection.length == 0
    }
  },
  mounted () {
    this.tableInfo.columns = TABLE_COLUMNS
    this.getTableData()
  },
  methods: {
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [
        { label: '编辑', method: this.handleEdit, hasAuth: true },
      ]
      return getTableAction({ h, row, actionList, showBtn: this.showBtn })
    },
    // 渲染表头按钮
    renderBtns () {
      const btns = [
        { btnTxet: '导出', loading: this.exportLoading, method: this.handleExport, hasAuth: true },
        { btnTxet: '新增', method: this.handleAdd, hasAuth: true },
        { btnTxet: '编辑', method: this.batchEdit, hasAuth: true, disabled: this.notSelectData },
      ]
      return btns.filter(item => !item.hasAuth || (item.hasAuth && this.showBtn(item.btnTxet)))
    },
    // 获取表格数据
    async getTableData () {
      const res = await queryFactoryStandardListService(
        {
          configType: CONFIG_TYPE,
          ...this.formData,
          ...this.pagination
        },
        state => { this.tableInfo.loading = state }
      );
      if (res?.data) {
        const { list, totalSize } = res.data
        this.tableInfo.list = list || []
        this.total = totalSize
      }
    },
    // 导出信息数据
    async handleExport () {
      const res = await exportFactoryStandardService(
        {
          configType: CONFIG_TYPE,
          ...this.formData
        },
        state => { this.exportLoading = state; }
      );
      createExcelByExport({ res, excelTitle: '钢铁类厂直标准' })
    },
    // 新增
    handleAdd () {
      this.$router.push({ name: 'steelStandardUpdate' })
    },
    // 编辑
    handleEdit (row) {
      this.$router.push({
        name: 'steelStandardUpdate',
        params: { idList: [row.factoryDirectConfigId] }
      })
    },
    // 批量编辑
    batchEdit () {
      const idList = this.tableInfo.selection.map(item => (item.factoryDirectConfigId))
      this.$router.push({
        name: 'steelStandardUpdate',
        params: { idList }
      })
    },
    // 获取分类Id
    getCategoryCode (val) {
      const { categoryUuid } = val
      this.formData = {
        categoryCode: categoryUuid
      }
    },
    // 清空品类选择信息
    clearCategorySelect () {
      this.$refs.categorySingle.handleClear()
    },
  }
}
</script>
